<template>
  <div>
    <h2>购物车</h2>
    <!--后退  -->
    <Back></Back>
    <!--购物车列表  -->
    <CarList></CarList>
    <!-- vuex的示例 -->
    <h5>vuex中使用模块的示例</h5>
    <hr/>
    <p>moduleA</p>
    <p>$store.state.a.count:{{$store.state.a.count}}</p>
    <input type="button" value="修改模块里的数据count" @click="addCount">
    <p>moduleB：todolist</p>
    <ul>
      <li v-for="item in $store.state.moduleB.todoList">
        <input type="checkbox" v-model="item.isFinished" >
        <span>任务名:{{item.desc}}</span>        
      </li>
    </ul>
    <input type="button" value="添加任务" @click="addTodo">

    <!--底部  -->
    <FooterBar></FooterBar>
  </div>
</template>

<script>
import Back from "../components/Back.vue";
import CarList from "../components/CarList.vue";
import FooterBar from "@/components/FooterBar.vue"

export default {
    name:"ShoppingCar",
    components:{
        Back,CarList,FooterBar
    },
    created(){
      console.log("shoppingCar组件：this.$store",this.$store);
    },
    methods:{
      addCount(){
        this.$store.commit("a/incCount");
      },
      addTodo(){
        this.$store.commit({
          type:"moduleB/mAddTodo",
          data:{
            desc:"写html",
            isFinished:false
          }
        });
      }
    }
    // 组件内部的守卫
    // beforeRouteEnter(to,from,next){
    //   // 在组件内部的前置守卫里，没法获取到组件的this。
    //   if(!sessionStorage.getItem("username")){
    //       next("/Login?path="+to.path);
    //   }else{
    //       next()
    //   }
    // }

}
</script>

<style>

</style>